<template>
  <div class="tab-bar">
    <ul class="tab-bar-list">
      <li class="tab-bar-item" v-for="item in tabs" :key="item.id">
        <router-link :to="item.path" active-class="active">
          <van-icon :name="item.iconName" />
          <span>
            {{ item.title }}
          </span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";

export default defineComponent({
  setup() {
    const active = ref(0);
    const state = reactive({
      tabs: [
        {
          id: 1,
          title: "首页",
          iconName:
            "https://img.alicdn.com/imgextra/i3/2053469401/O1CN01rOVk9v2JJhyA5EZe4_!!2053469401.png",
          path: "/home",
        },
        {
          id: 2,
          title: "9.9包邮",
          iconName:
            "https://img.alicdn.com/imgextra/i4/2053469401/O1CN01rykyDG2JJhy7hbrAz_!!2053469401.png",
          path: "/postage",
        },
        {
          id: 3,
          title: "列表",
          iconName:
            "https://img.alicdn.com/imgextra/i1/2053469401/O1CN01oJVgxK2JJhy6tcmIV_!!2053469401.png",
          path: "/cate",
        },
        {
          id: 4,
          title: "收藏",
          iconName:
            "https://img.alicdn.com/imgextra/i3/2053469401/O1CN01dOMJYj2JJhy7hn8NL_!!2053469401.png",
          path: "/collect",
        },
        {
          id: 5,
          title: "我的",
          iconName:
            "https://img.alicdn.com/imgextra/i1/2053469401/O1CN01nciXh82JJhy521N9P_!!2053469401.png",
          path: "/mine",
        },
      ],
    });
    return { active, ...toRefs(state) };
  },
});
</script>
<style lang="stylus" scoped>
@import '../../assets/style/border.styl';

.tab-bar {
  position:fixed;
  bottom :0;
  width: 100%;
  height: 0.468rem;
  padding-top: 0.02rem;
  background: #fff;
  z-index: 100;

  .tab-bar-list {
    display: flex;

    .tab-bar-item {
      width: 20%;

      a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        text-align: center;
        color: #696969;

        /deep/ &.active {
          color: $themeColor !important;
        }

        .van-icon {
          font-size: 0.25rem;
        }

        span {
          font-size: 0.1rem;
        }
      }
    }
  }
}
</style>
